﻿<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

	<button id="button1">点击按钮1</button>
	<button id="button2">点击按钮2</button>
	<button id="button3">点击按钮3</button>

	<script>
		var button1 = document.getElementById( 'button1' ),
		var button2 = document.getElementById( 'button2' ),
		var button3 = document.getElementById( 'button3' );

		var setCommand = function( button, command ){
			button.onclick = function(){
				command.execute();
			}
		};

		var MenuBar = {
			refresh: function(){
				console.log( '刷新菜单目录' );
			}
		};
		var SubMenu = {
			add: function(){
				console.log( '增加子菜单' );
			},
			del: function(){
				console.log( '删除子菜单' );
			}
		};
		在让button 变得有用起来之前，我们要先把这些行为都封装在命令类中：
		var RefreshMenuBarCommand = function( receiver ){
			this.receiver = receiver;
		};
		RefreshMenuBarCommand.prototype.execute = function(){
			this.receiver.refresh();
		};
		var AddSubMenuCommand = function( receiver ){
			this.receiver = receiver;
		};

		AddSubMenuCommand.prototype.execute = function(){
			this.receiver.add();
		};
		var DelSubMenuCommand = function( receiver ){
			this.receiver = receiver;
		};
		DelSubMenuCommand.prototype.execute = function(){
			console.log( '删除子菜单' );
		};

		var refreshMenuBarCommand = new RefreshMenuBarCommand( MenuBar );
		var addSubMenuCommand = new AddSubMenuCommand( SubMenu );
		var delSubMenuCommand = new DelSubMenuCommand( SubMenu );
		setCommand( button1, refreshMenuBarCommand );
		setCommand( button2, addSubMenuCommand );
		setCommand( button3, delSubMenuCommand );
	</script>


	<script type="text/javascript">
		var bindClick = function( button, func ){
			button.onclick = func;
		};
		var MenuBar = {
			refresh: function(){
				console.log( '刷新菜单界面' );
			}
		};
		var SubMenu = {
			add: function(){
				console.log( '增加子菜单' );
			},
			del: function(){
				console.log( '删除子菜单' );
			}
		};
		bindClick( button1, MenuBar.refresh );

		bindClick( button2, SubMenu.add );
		bindClick( button3, SubMenu.del );

		var setCommand = function( button, func ){
			button.onclick = function(){
				func();
			}
		};
		var MenuBar = {
			refresh: function(){
				console.log( '刷新菜单界面' );
			}
		};
		var RefreshMenuBarCommand = function( receiver ){
			return function(){
				receiver.refresh();
			}
		};
		var refreshMenuBarCommand = RefreshMenuBarCommand( MenuBar );
		setCommand( button1, refreshMenuBarCommand );


		var RefreshMenuBarCommand = function( receiver ){
			return {
				execute: function(){
					receiver.refresh();
				}
			}
		};
		var setCommand = function( button, command ){
			button.onclick = function(){
				command.execute();
			}
		};
		var refreshMenuBarCommand = RefreshMenuBarCommand( MenuBar );
		setCommand( button1, refreshMenuBarCommand );
	</script>

</body>
</html>



<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<body>
		<div id="ball" style="position:absolute;background:#000;width:50px;height:50px"></div>
		输入小球移动后的位置：<input id="pos"/>
		<button id="moveBtn">开始移动</button>
		<div id="ball" style="position:absolute;background:#000;width:50px;height:50px"></div>
		输入小球移动后的位置：<input id="pos"/>
		<button id="moveBtn">开始移动</button>
		<button id="cancelBtn">cancel</cancel> <!--增加取消按钮-->
		</body>
		<script>
			var ball = document.getElementById( 'ball' );
			var pos = document.getElementById( 'pos' );
			var moveBtn = document.getElementById( 'moveBtn' );
			moveBtn.onclick = function(){
				var animate = new Animate( ball );
				animate.start( 'left', pos.value, 1000, 'strongEaseOut' );
			};

			var ball = document.getElementById( 'ball' );
			var pos = document.getElementById( 'pos' );
			var moveBtn = document.getElementById( 'moveBtn' );

			var MoveCommand = function( receiver, pos ){
				this.receiver = receiver;
				this.pos = pos;
			};
			MoveCommand.prototype.execute = function(){
				this.receiver.start( 'left', this.pos, 1000, 'strongEaseOut' );
			};
			var moveCommand;
			moveBtn.onclick = function(){
				var animate = new Animate( ball );
				moveCommand = new MoveCommand( animate, pos.value );
				moveCommand.execute();
			};
		</script>

		<script>
			var ball = document.getElementById( 'ball' );
			var pos = document.getElementById( 'pos' );
			var moveBtn = document.getElementById( 'moveBtn' );
			var cancelBtn = document.getElementById( 'cancelBtn' );
			var MoveCommand = function( receiver, pos ){
				this.receiver = receiver;
				this.pos = pos;
				this.oldPos = null;
			};
			MoveCommand.prototype.execute = function(){
				this.receiver.start( 'left', this.pos, 1000, 'strongEaseOut' );
				this.oldPos = this.receiver.dom.getBoundingClientRect()[ this.receiver.propertyName ];
					// 记录小球开始移动前的位置
				};

				MoveCommand.prototype.undo = function(){
					this.receiver.start( 'left', this.oldPos, 1000, 'strongEaseOut' );
			// 回到小球移动前记录的位置
		};
		var moveCommand;

		moveBtn.onclick = function(){
			var animate = new Animate( ball );
			moveCommand = new MoveCommand( animate, pos.value );
			moveCommand.execute();
		};
		cancelBtn.onclick = function(){
				moveCommand.undo(); // 撤销命令
			};
		</script>

	</body>
	</html>

	<html>
	<body>
		<button id="replay">播放录像</button>
	</body>
	<script>
		var Ryu = {
			attack: function(){
				console.log( '攻击' );
			},
			defense: function(){
				console.log( '防御' );
			},
			jump: function(){
				console.log( '跳跃' );
			},
			crouch: function(){
				console.log( '蹲下' );
			}
		};

		var makeCommand = function( receiver, state ){ // 创建命令
			return function(){
				receiver[ state ]();
			}
		};
		var commands = {
			"119": "jump", // W
			"115": "crouch", // S
			"97": "defense", // A
			"100": "attack" // D
		};

		var commandStack = []; // 保存命令的堆栈
		document.onkeypress = function( ev ){
			var keyCode = ev.keyCode,
			command = makeCommand( Ryu, commands[ keyCode ] );
			if ( command ){
				command(); // 执行命令
				commandStack.push( command ); // 将刚刚执行过的命令保存进堆栈
			}
		};

		document.getElementById( 'replay' ).onclick = function(){ // 点击播放录像
			var command;
			while( command = commandStack.shift() ){ // 从堆栈里依次取出命令并执行
				command();
			}
		};


	</script>
	</html>


	<script type="text/javascript">
		var closeDoorCommand = {
			execute: function(){
				console.log( '关门' );
			}
		};
		var openPcCommand = {
			execute: function(){
				console.log( '开电脑' );
			}
		};

		var openQQCommand = {
			execute: function(){
				console.log( '登录QQ' );
			}
		};

		var MacroCommand = function(){
			return {
				commandsList: [],
				add: function( command ){
					this.commandsList.push( command );
				},
				execute: function(){
					for ( var i = 0, command; command = this.commandsList[ i++ ]; ){
						command.execute();
					}
				}
			}
		};
		var macroCommand = MacroCommand();
		macroCommand.add( closeDoorCommand );
		macroCommand.add( openPcCommand );
		macroCommand.add( openQQCommand );
		macroCommand.execute();


	</script>